<template>
	<view class="list">
		<view class="item" v-for="(item, i) in 10" :key="i" @tap="visitorSelect">
			<view class="icon">
				<u-image width="180rpx" height="180rpx" src="/static/images/a21.png"></u-image>
			</view>
			<view class="">
				<view class="user-info">
					<view class="name">易小博</view>
					<view class="age">男  35</view>
					<view class="self">本人</view>
				</view>
				<view class="mobile">
					183****1225
				</view>
			</view>
			<u-image width="36rpx" height="30rpx" src="/static/images/a22.png"></u-image>
		</view>
	</view>
	
	<view class="btn">
		<u-button throttleTime="1000" :customStyle="{height: '86rpx', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)" @click="goAdd">添加就诊人</u-button>
	</view>
</template>

<script setup>
	const status = ref('')
	onLoad(({type}) => {
		status.value = type
	})
	const goAdd = () => {
		uni.navigateTo({
			url: '/mine/visitor/add'
		})
	}
	// 选择就诊人
	const visitorSelect = () => {
		if (status.value == 'add') {
			uni.navigateBack()
		} else {
			uni.navigateTo({
			    url: '/mine/medical/medical'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		padding: 50rpx 26rpx 180rpx;
		.item {
			@include between(100%);
			position: relative;
			margin-bottom: 30rpx;
			padding: 34rpx 38rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			.icon {
				position: absolute;
				top: 0;
				right: 38rpx;
				z-index: 99;
			}
			
			.user-info {
				@include start();
				align-items: flex-end;
				.name {
					font-size: 32rpx;
					color: #312C2A;
				}
				.age {
					font-size: 26rpx;
					color: #606672;
					margin-left: 26rpx;
				}
				.self {
					@include center(86rpx, 38rpx);
					margin-left: 30rpx;
					background: linear-gradient(315deg, #4975EC 0%, #97B3FF 100%);
					border-radius: 7rpx;
					font-size: 26rpx;
					color: #fff;
				}
			}
			.mobile {
				margin-top: 38rpx;
				font-size: 26rpx;
				color: #606672;
			}
		}
	}
	.btn {
		padding: 0 55rpx;
		width: 100%;
		position: fixed;
		left: 50%;
		bottom: 70rpx;
		transform: translateX(-50%);
		z-index: 999;
	}
</style>
